import { ProTable, ProColumns } from '@ant-design/pro-components';
import { ETCPlatform, ReportETCRecordStatus } from '../types.d';
import type { ReportETCRecordTableItem } from '../types.d';
import { cancelETC, queryETCReportList } from '../service';
import { useModel } from 'umi';
import { Role } from '@/utils/types.d';
import PlaceHolderCpn from '@/components/PlaceHolderCpn';
import ConfirmModal from '@/components/ConfirmModal';

const ReportETCRecordList = () => {
  const { initialState } = useModel('@@initialState');
  const currUser = initialState?.currentUser;
  const isAdmin = currUser?.role === Role.ADMIN;
  const columns: ProColumns<ReportETCRecordTableItem>[] = [
    {
      title: '订单编号',
      dataIndex: 'orderNo',
      align: 'center',
    },
    {
      title: '车牌号码',
      dataIndex: 'plateNumber',
      align: 'center',
    },
    {
      title: '金额',
      dataIndex: 'amount',
      hideInSearch: true,
      align: 'center',
      valueType: 'money',
      renderText: (text) => (text / 100).toFixed(2),
    },
    {
      title: 'ETC流水号',
      dataIndex: 'platformNo',
      align: 'center',
    },
    {
      title: 'ETC平台',
      dataIndex: 'platform',
      align: 'center',
      // 暂不开放
      hideInSearch: true,
      valueEnum: {
        [ETCPlatform.deya]: { text: '德亚' },
      },
    },
    {
      title: '驶入时间',
      dataIndex: 'inTime',
      align: 'center',
      valueType: 'dateTime',
      hideInForm: true,
      hideInSearch: true,
    },
    {
      title: '驶出时间',
      dataIndex: 'outTime',
      align: 'center',
      valueType: 'dateTime',
      hideInForm: true,
      hideInSearch: true,
    },
    {
      title: '推送时间',
      dataIndex: 'createTime',
      align: 'center',
      valueType: 'dateTime',
      hideInForm: true,
      hideInSearch: true,
    },
    {
      title: '开始时间',
      tooltip: '推送时间开始范围',
      dataIndex: 'startTime',
      hideInForm: true,
      hideInTable: true,
      valueType: 'dateTime',
    },
    {
      title: '结束时间',
      tooltip: '推送时间结束范围',
      dataIndex: 'endTime',
      hideInForm: true,
      hideInTable: true,
      valueType: 'dateTime',
    },
    {
      title: '状态',
      dataIndex: 'status',
      hideInForm: true,
      valueEnum: {
        [ReportETCRecordStatus.FAILED]: { text: '推送失败' },
        [ReportETCRecordStatus.WAITING]: { text: '等待扣费' },
        [ReportETCRecordStatus.SUCCESS]: { text: '扣费成功' },
        [ReportETCRecordStatus.CANCELED]: { text: '已撤销' },
      },
    },
    {
      title: '状态变化时间',
      dataIndex: 'statusChangeTime',
      align: 'center',
      valueType: 'dateTime',
      hideInForm: true,
      hideInSearch: true,
    },
    {
      title: '操作',
      dataIndex: '_id',
      valueType: 'option',
      align: 'center',
      hideInSearch: true,
      hideInTable: !isAdmin,
      render: (_, record, x, action) => [
        record.status == ReportETCRecordStatus.WAITING ? (
          <ConfirmModal
            reload={() => action?.reload()}
            operFunc={async () => await cancelETC(record._id)}
            text={`确定撤销「订单${record.orderNo}(${record.plateNumber})」的ETC追缴吗？`}
            btnText="撤销"
            titleText="撤销ETC追缴"
          />
        ) : (
          <PlaceHolderCpn text="无需操作" />
        ),
      ],
    },
  ];
  return (
    <ProTable<ReportETCRecordTableItem>
      columns={columns}
      rowKey="_id"
      scroll={{ x: true }}
      style={{ whiteSpace: 'nowrap' }}
      search={{
        labelWidth: 'auto',
      }}
      columnEmptyText="暂无数据"
      pagination={{
        showSizeChanger: true,
        showQuickJumper: true,
        defaultPageSize: 10,
        size: 'default',
      }}
      debounceTime={300}
      request={queryETCReportList}
    />
  );
};

export default ReportETCRecordList;
